<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="../css/styles.css">
<style>
input {
border: 1px solid #ccc;
border-radius: 5px;
padding: 15px 15px;
height: 10px;
width: 400px;
font-size: 16px;
}
</style>
</head>
<body>
<div id ="app">
<input type="text" v-model="input" placeholder="请输入商品名称或编号">
</input><el-button icon="el-icon-search" circle @click="search"></el-button>
<el-button @click="reset">重置</el-button>
		<el-table :data="tableData" border style="width: 100%"> 
			<el-table-column prop="pid" label="商品编号" width="100"></el-table-column> 
			<el-table-column prop="pname" label="商品名称" width="180"></el-table-column> 
			<el-table-column prop="price" label="商品价格" width="100"> </el-table-column> 
			<el-table-column prop="time" label="上架日期" width="180"> </el-table-column>
			<el-table-column prop="bsize" label="尺寸" width="180"> </el-table-column>
			<el-table-column prop="bcolor" label="颜色" width="180"> </el-table-column>
			<el-table-column prop="bnum" label="库存" width="180"> </el-table-column>
			<el-table-column prop="intro" label="简介" width="180"> </el-table-column>
			<el-table-column label="查看详情" width="180">
				<template v-slot = "scope">
					<el-button type="primary" icon="el-icon-edit" circle @click="viewDetail(scope.row.pid, scope.$index)"></el-button>
				</template>
			</el-table-column>
			<el-table-column label="操作"> 
				<template v-slot = "scope" >
    					<el-checkbox v-model="scope.row.pstatus" @change.native = "grounding(scope.row.pstatus, scope.row.pid)">在架</el-checkbox>
				</template>
			</el-table-column>
		</el-table> 
		
		<div class="page text-right clearfix" style="margin-top: 40px" id="page">
			<a href="javascript:void(0)" @click="changePage(-1)">上一页</a>
			<a href="javascript:void(0)" class="select" @click="optionPage(1)">1</a>
			<a href="javascript:void(0)" v-for="index in totalPage" @click="optionPage(index + 1)">{{index + 1}}</a>
			<a href="javascript:void(0)" @click="changePage(1)">下一页</a>
		</div>
		
		<el-dialog title="服装详情" :visible.sync="dialogFormVisible" >
			  <el-form :model="form">
			    <el-form-item label="商品名称" :label-width="formLabelWidth">
			      <el-input v-model="form.pname" autocomplete="off"></el-input>
			    </el-form-item>
			    <el-form-item label="商品价格" :label-width="formLabelWidth">
			      <el-input v-model="form.price" autocomplete="off"></el-input>
			    </el-form-item>
			    <el-form-item label="商品简介" :label-width="formLabelWidth">
			      <el-input v-model="form.intro" autocomplete="off"></el-input>
			    </el-form-item>
			    <el-form-item label="库存" :label-width="formLabelWidth">
			      <el-input v-model="form.bnum" autocomplete="off"></el-input>
			    </el-form-item>

			
			    <el-form-item label="商品参数" :label-width="formLabelWidth" >
			      <el-select v-model="form.bcolor" placeholder="请选择服装颜色">
			        <el-option label="白色" value="白色" ></el-option>
			        <el-option label="黑色" value="黑色" ></el-option>
			        <el-option label="粉色" value="粉色" ></el-option>
			        <el-option label="绿色" value="绿色" ></el-option>
			        <el-option label="黄色" value="黄色" ></el-option>
			        <el-option label="红色" value="红色" ></el-option>
			        <el-option label="蓝色" value="蓝色" ></el-option>
			        <el-option label="青色" value="青色" ></el-option>
			        <el-option label="紫色" value="紫色" ></el-option>
			      </el-select>
			      
			       <el-select v-model="form.bsize" placeholder="请选择服装尺寸">
				         <el-option label="S码" value="S码" ></el-option>
				         <el-option label="M码" value="M码" ></el-option>
				         <el-option label="L码" value="L码" ></el-option>
				         <el-option label="XL码" value="XL码" ></el-option>
				         <el-option label="2XL码" value="2XL码" ></el-option>
				         <el-option label="3XL码" value="3XL码" ></el-option>
			      </el-select>
			    </el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
				    <el-button type="primary" @click="updateProduct">立即修改</el-button>
				    <el-button @click="dialogFormVisible = false">取 消</el-button>
			  </div>
		</el-dialog>
</div>
<script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../../js/vue.js"></script>
<script type="text/javascript" src="../../js/show-dialog.js"></script>
<script type="text/javascript" src="../../js/axios.js"></script>
<script type="text/javascript" src="../../js/qs.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
let app = new Vue({
	el: "#app",
	data: {
		tableData: [],
		input: '',
        dialogFormVisible: false,
        formLabelWidth: '120px',
        page: 1,
        pageSize: 4,
        totalPage: 0,
        xx: {},
        form: {
        	pid: 0,
            pname: '',
            price: '',
            intro: '',
            bcolor:'',
            bsize:'',
            bnum: 0,
            bid:0,
            num:0,
          }
	},
	mounted() {
		this.findBackProducts();
		this.findBackProductsCount();
	},
	methods: {
		search() {//查询
			if(this.input == '' || this.input == null) {
				alert("请先输入您要查询的关键词！");
				return;
			}
			this.page = 1;
			this.totalPage = 0;
			$("#page a").removeClass("select");
			$("#page a").eq(1).addClass("select");
			axios.post("../../product/searchProduct", qs.stringify({pname: this.input})).then(rt => {
				if(rt.status == 200 && rt.data.code == 200) {
					this.tableData = rt.data.product;
					this.tableData.forEach(item => {
						if(item.pstatus == 1) {
							item.pstatus = true;
						}else {
							item.pstatus = false;
						}
					});
					this.input = '';
				} else {
					showmsg("暂无数据....", "yellow");
					this.tableData = [];
					this.input = '';
				}
			});
		},
		reset() {//倒回第一页
			this.page = 1;
			$("#page a").removeClass("select");
			$("#page a").eq(1).addClass("select");
			this.findBackProducts();
			this.findBackProductsCount();
		},
		updateProduct() {//修改商品
			if(this.form.bcolor == '' || this.form.bcolor == null || this.form.bsize == '' || this.form.bsize == null) {
				alert("请先选择服装的颜色和尺码....");
				return;
			}
			if(this.form.pname == '' || this.form.pname == null || this.form.price <= 0 || this.form.price == null || this.form.bnum <= 0 || this.form.bnum == null) {
				alert("请先不全重要信息....");
				return;
			}
		
			axios.post("../../product/updateProduct", qs.stringify({pid: this.form.pid, pname: this.form.pname, price: this.form.price, intro: this.form.intro, bcolor: this.form.bcolor, bsize: this.form.bsize, bnum: this.form.bnum,bid:this.form.bid,num:this.form.num})).then(rt => {
				if(rt.data.code == 200) {
					this.dialogFormVisible = false;
					showmsg("修改成功！", "green");
					this.findBackProducts();
				} else {
					showmsg("修改失败！", "red");
				}
			})
		},
		optionPage(idx) {//更加页数查询
			this.page = idx;
			this.findBackProducts();
			$("#page a").removeClass("select");
			$("#page a").eq(idx).addClass("select");
		},
		changePage(num) {//改变页数
			if(this.page == 1 && num < 0) {
				return;
			}
			if(this.page == (this.totalPage + 1) && num > 0) {
				return;
			}
			this.page += num;
			this.findBackProducts();
			$("#page a").removeClass("select");
			$("#page a").eq(this.page).addClass("select");
		},
		viewDetail(pno, row) {
			this.form = this.tableData[row];
			this.dialogFormVisible = true;
			this.form.num = this.tableData[row].bnum;
		},
		findBackProducts() {//根据页面查询√
			axios.post("../../product/findBackProductsList", qs.stringify({page: this.page, pageSize: this.pageSize})).then(rt => {
				if(rt.data.code == 200 && rt.status == 200){
					this.tableData = rt.data.data;
					this.tableData.forEach(item => {
						if(item.pstatus == 1) {
							item.pstatus = true;
						}else {
							item.pstatus = false;
						}
					});
					console.log(this.tableData,"this.tableData");
				}
			});
		},
		findBackProductsCount() {//查询总页数√
			axios.get("../../product/findBackProductsCount").then(rt => {
				if(rt.data.code == 200 && rt.status == 200) {
					this.totalPage = Math.ceil(rt.data.data / this.pageSize);
					if(this.totalPage < 0) {
						this.totalPage = 0;
					}
				}
			})
		},
		grounding(status, pno) {//修改状态 √
			if(status == true) {
				axios.post("../../product/updateStatus", qs.stringify({pid: pno, pstatus: 1})).then(rt => {
					if(rt.data.code == 200) {
						showmsg("服装上架成功！", "green");
					}
				});
			} else {
				axios.post("../../product/updateStatus", qs.stringify({pid: pno, pstatus: 0})).then(rt => {
					if(rt.data.code == 200) {
						showmsg("服装下架成功！", "green");
					}
				});
			}
		}
	}
})
</script>
</body>
</html>